import React  from 'react';
// 新生命周期01
class App extends React.Component{
  state = {
    myname: "小红",
    myage: 100,
  };
  // componentWillMount 初始化
  static getDerivedStateFromProps(nextProps, nextState) {
    //这个生命周期
    // 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，返回一个对象作为新的state，返回null则说明不需要在这里更新state
    // console.log(this)
    console.log("getDrivedStateFromProps", nextState);
    return {
      myname:
        nextState.myname.substring(0, 1).toUpperCase() +
        nextState.myname.substring(1),
    };
  }

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              myname: "老王",
            });
          }}
        >
          click
        </button>
        app - {this.state.myname}-{this.state.myage}
      </div>
    );
  }
}

export default App;
